<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Basic grid</title>	
	
	<link rel="stylesheet" href="../css/slick-grid.css" type="text/css" />
	<link rel="stylesheet" href="../css/jquery-ui-plugins-grid.css" type="text/css" />	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.16/themes/redmond/jquery-ui.css">

	<style type="text/css">
		div.slick-cell.centered {
			text-align: center;
		}
		
		.ui-changed-cell {
			background-color: #fccf70;
		}		
				
		.error {
			background: #ff0000 !important;
		}
		
		.centered {
			text-align: center;
		}

	</style>
</head>
<body>

	<div id="myGrid" style="width: 1000px; height: 500px;"></div>	

	<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.js"></script>
	
	<!-- to avoid all these imports you can just include jquery-ui-plugins-0.0.12.js -->		
	<script src="../js/lib/jquery.event.drag-2.0.min.js"></script>
	<script src="../js/lib/jquery.event.drop-2.0.min.js"></script>

	<script src="../js/lib/date.min.js"></script>
	<script src="../js/lib/slick.core.js"></script>
	<script src="../js/lib/slick.grid.js"></script>
	<script src="../js/lib/slick.dataview.js"></script>
	<script src="../js/jquery-ui-plugins-core.js"></script>	
	<script src="../js/jquery-ui-plugins-grid.js"></script>
	<script src="../js/jquery-ui-plugins-textinput.js"></script>

	<script>		
		
		var methodologyOptions = [
			{'name': 'None', 'value': ''}, 
			{'name': 'Extreme Programming', 'value': 'extreme programming'}, 
			{'name': 'Scrum', 'value': 'scrum'},
			{'name': 'Waterfall', 'value': 'waterfall'}
		];
		
		var cols = [ {
			id : 'project',
			name : 'Project Name',
			field : 'project',
			// custom sort function that parses the number and then sorts based on that
			sort: function(row1, row2) {
				var val = Number(row1['project'].substring(7));
				var val2 = Number(row2['project'].substring(7));
				return (val == val2 ? 0 : (val > val2 ? 1 : -1));	
			},			
			editor: 'text',
			filter: 'contains',
			toolTip: 'This is the Project Name column'
		}, 
		{
			id : 'duration',
			name : 'Duration',
			field : 'duration',
			filter: {				
				'impl': function(filterValue, itemValue) {
					return Number(itemValue.replace('Approximately', '').replace('days', '').trim()) > Number(filterValue);
				}				
			},
			editor: 'text'
		}, 		
		{
			id : 'cost',
			focusable: false,
			name : 'Cost',
			field : 'cost',
			filter: 'numeric',
			editor: 'numeric',
			formatter: 'currency'
		}, 
		{
			id : 'percentComplete',
			name : '% Complete',
			field : 'percentComplete',
			filter: 'numeric',
			editor: 'numeric',
			dataType: 'numeric'
		}, 
		{
			id : 'start',
			name : 'Start',
			field : 'start',
			editor: 'date',
			sort: 'date',
			dateFormat: 'MM/dd/yyyy',
			filter: 'date'
		}, 
		{
			id : 'finish',
			name : 'Finish',
			field : 'finish',
			editor: 'date',
			sort: 'date',
			filter: 'date',
			dateFormat: 'MM/dd/yyyy'
		}, 
		{
			id: 'onSchedule',
			name: 'On Schedule',
			field: 'onSchedule',
			cssClass: 'centered',
			formatter: {'type': 'checkbox', 'checkedValue': 'sure', 'notCheckedValue': 'noway'},
			filter: [
				{'name': 'Yes', 'value': 'sure'},
				{'name': 'No', 'value': 'noway'}
			]			
		},
		{
			id : 'onBudget',
			name : 'On Budget',
			field : 'onBudget',
			cssClass: 'centered',
			filter: ['true', 'false'], // simple string array filter example,
			editor: ['true', 'false']
		},
		{
			id : 'fullyFunded',
			name : 'Fully Funded',
			field : 'fullyFunded',
			formatter: formatCheckMark,	
			// object array filter example
			filter: [
				{'name': 'Yes', 'value': 'true'}, 
				{'name': 'No', 'value': 'false'}
			],			
			cssClass: 'centered',
			selectable: false
		},
		{
			id : 'methodology',
			name : 'Methodology',
			field : 'methodology',			
			formatter: 'properCase',
			filter: methodologyOptions,
			cssClass: 'centered',
			editor: methodologyOptions
		}		
		];		

		$(function() {
			var myData = [];			
			var year = 10;			
			
			for ( var i = 0; i < 5000; i++) {
				var random = Math.random();
				var day = (Math.round(Math.random() * 29) + '').padLeft(2, '0');
				myData[i] = {
					project : 'Project ' + i,
					duration : 'Approximately ' + (i % 100) + ' days',
					cost: ((random + 1) * 3000000)/4,
					percentComplete : Math.round(random * 100) + '',
					start : '11/08/20' + year,
					finish : '12/29/20' + year,
					onBudget : (i % 5 != 0),
					fullyFunded: (i % 7 == 0),
					methodology: (i % 9 == 0 ? '' : (i % 7 == 0 ? 'waterfall' : 'scrum')),
					onSchedule: (i % 2 == 0 ? 'noway' : 'sure')
				};
			
				year = year == 99 ? 10 : ++year;
			}

			var $grid = $('#myGrid').grid({
				'data': myData,
				'columns': cols,
				'rowKey': 'project',
				'forceFitColumns': true,
				'editable': true,
				'enableColumnReorder': true
			});						
		})
		
		function formatCheckMark(rowNum, cellNum, value, columnDef, row) {
			var image = '';
			
			if(value) {
				image = '<img src="images/tick.png"/>';
			}
			
			return image;
		}
	</script>
</body>
</html>
